import 'package:flutter/material.dart';
import 'package:flutter_common/widget/funAppBar.dart';
import 'package:flutter_common/net/http.dart';
import 'package:flutter_fun_app/model/musicRangeModel.dart';
import 'package:flutter_fun_app/page/rangeListPage.dart';
import 'package:flutter_fun_app/model/radioModel.dart';
import 'package:flutter_fun_app/page/radioListPage.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';
import 'package:flutter_fun_app/utils/easyRefresh.dart';
import 'package:fluintl/fluintl.dart';
import 'package:flutter_fun_app/utils/strings.dart';
import 'package:flutter_fun_app/utils/easyHeader.dart';
import 'package:flutter_fun_app/utils/easyFooter.dart';

class MusicPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return MusicState();
  }
}

class MusicState extends State<MusicPage> {
  List<Result> musicRangeList = List();
  List<RadioResult> radioList = List();
  List<Channellist> channer1List = List();
  GlobalKey<EasyRefreshState> easyRefreshKey =
      new GlobalKey<EasyRefreshState>();
  GlobalKey<RefreshHeaderState> headerKey = new GlobalKey<RefreshHeaderState>();
  GlobalKey<RefreshFooterState> footerKey = new GlobalKey<RefreshFooterState>();
  bool loadMore = true;
  bool refresh = true;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((callBack) {
      easyRefreshKey.currentState.callRefresh();
    });
  }

  Future<void> getRadioList() async {
    var url = 'https://api.apiopen.top/musicBroadcasting';
    HttpUtil.get(url, success: (data) {
      RadioModel radioModel = RadioModel.fromJson(data);
      if (radioModel.code == 200) {
        RadioResult result = radioModel.result[0];
        setState(() {
          channer1List = result.channellist;
        });
      }
    }, error: (err) {}, then: () {});
  }

  Future<void> getRangeMusic() async {
    var url = 'https://api.apiopen.top/musicRankings';
    HttpUtil.get(url, success: (data) {
      MusicRangeModel musicRangeModel = MusicRangeModel.fromJson(data);
      if (musicRangeModel.code == 200) {
        setState(() {
          musicRangeList = musicRangeModel.result;
        });
      }
    }, error: (err) {}, then: () {});
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Material(
        child: Scaffold(
            appBar: FunAppBar(
              title: IntlUtil.getString(context, Ids.title_music),
            ),
            body: new EasyRefresh(
              key: easyRefreshKey,
              refreshHeader: EasyHeader(key: headerKey),
              refreshFooter: EasyFooter(key: footerKey),
              onRefresh: () async {
                loadMore = true;
                setState(() {
                  musicRangeList.clear();
                  radioList.clear();
                  channer1List.clear();
                });
                getRangeMusic();
                getRadioList();
              },
              loadMore: loadMore
                  ? () async {
                      easyRefreshKey.currentState.waitState(() {
                        setState(() {
                          loadMore = false;
                        });
                      });
                    }
                  : null,
              child: CustomScrollView(slivers: <Widget>[
                SliverPadding(
                  padding: const EdgeInsets.all(5.0),
                  sliver: SliverGrid(
                    //Grid
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 3,
                      mainAxisSpacing: 5,
                      crossAxisSpacing: 5,
                      childAspectRatio: 0.8,
                    ),
                    delegate: SliverChildBuilderDelegate(
                      (BuildContext context, int index) {
                        //创建子widget
                        return rangeItemBuilder(index);
                      },
                      childCount: musicRangeList.length,
                    ),
                  ),
                ),
                new SliverFixedExtentList(
                  itemExtent: 100.0,
                  delegate: new SliverChildBuilderDelegate(
                      (BuildContext context, int index) {
                    //创建列表项
                    return ListView.builder(
                      padding: EdgeInsets.all(5),
                      itemCount: channer1List.length,
                      scrollDirection: Axis.horizontal,
                      itemBuilder: (BuildContext context, int index) {
                        return radioItemBuilder(index);
                      },
                    );
                  }, childCount: 1 //50个列表项
                      ),
                ),
              ]),
            )));
  }

  Widget rangeItemBuilder(int index) {
    Result result = musicRangeList[index];
    return GestureDetector(
      child: Column(
        children: <Widget>[
          Image.network(
            result.picS192,
          ),
          Text(
            result.name,
            style: TextStyle(color: Colors.grey[600]),
          ),
        ],
      ),
      onTap: () {
        Navigator.push(
            context,
            new MaterialPageRoute(
                builder: (context) => RangeListPage(
                      title: result.name,
                      type: result.type,
                    )));
      },
    );
  }

  Widget radioItemBuilder(int index) {
    Channellist channel = channer1List[index];
    return GestureDetector(
      child: Padding(
        padding: EdgeInsets.only(right: 5),
        child: Column(
          children: <Widget>[
            ClipOval(
              child: Image.network(
                channel.thumb,
                width: 60,
                height: 60,
              ),
            ),
            Text(
              channel.name,
              style: TextStyle(color: Colors.grey[600], fontSize: 10),
            ),
          ],
        ),
      ),
      onTap: () {
        Navigator.push(
            context,
            new MaterialPageRoute(
                builder: (context) => RadioListPage(
                      channel: channel,
                    )));
      },
    );
  }
}
